<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>排队叫号</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{layui/css/layui.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{febs/css/febs.css(t=2)}" media="all">
    <link rel="stylesheet" th:href="@{febs/css/login.css(t=2)}" media="all">
    <link rel="icon" th:href="@{febs/images/favicon.ico}" type="image/x-icon"/>
</head>
<body>
<div id="febs-login" lay-title="排队1">
    <div class="login-wrap">
        <div class="layui-container">
            <div class="layui-row">
                <div th:each="obj: ${queueList}" class="layui-col-lg4" >
                    <span th:text="${obj.queueName}"></span>

                    <button class="btn" th:onclick="goQueue([[${obj.queueCode}]]);">点击取号</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{layui/layui.js}"></script>
<script th:inline="javascript">
        var layer;
        var $;
        var  febs;
        layui.use(['form', 'layer'], function (form, layer) {
            $ = layui.jquery;
            layer = layui.layer;
            febs = layui.febs;;
        });
        function goQueue(queueCode){
            layer.open({
                type: 1,
                title:'请输入身份信息（正式环境会读取身份证号）',
                content: $('#form_div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: ['500px', '300px'],
                scrollbar:false,
                btn:['确认','取消'],
                yes: function(index, layero){
                    var data ={};
                    data.idNumber=$(layero).find('#cardNumber').val();
                    data.mobile=$(layero).find('#mobile').val();
                    data.queueCode=queueCode;
                    console.info(data);
                    var ctx="/";
                    $.post(ctx + 'queue_api/doUserQueue', data, function (data) {
                        console.info("success");
                        if(data.code==200){
                            console.info("排号成功");
                            console.info(data);
                            layer.closeAll();
                        }else{
                            console.info("排号失败");
                            layer.closeAll();
                        }
                    });
                },
                success: function(layero, index){
                    var mobile=getMobile();
                    var cardNumber=getCardNumber();
                    $(layero).find('#mobile').val(mobile);
                    $(layero).find('#cardNumber').val(cardNumber);
                    $(layero).find('#queueCode').val(queueCode);
                }
            });
        }

        /**
         * 随机生成手机号
         * @returns {string}
         */
        function getMobile() {
            var prefixArray = new Array("130", "131", "132", "133", "135", "137", "138", "170", "187", "189");
            var i = parseInt(10 * Math.random());
            var prefix = prefixArray[i];
            for (var j = 0; j < 8; j++) {
                prefix = prefix + Math.floor(Math.random() * 10);
            }
            return prefix;
        }


        /**
         * 随机生成身份证号
         */
        function getCardNumber(){
            var coefficientArray = [ "7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"];// 加权因子
            var lastNumberArray = [ "1","0","X","9","8","7","6","5","4","3","2"];// 校验码
            var address = "420101"; // 住址
            var birthday = "19810101"; // 生日
            var s = Math.floor(Math.random()*10).toString() + Math.floor(Math.random()*10).toString() + Math.floor(Math.random()*10).toString();
            var array = (address + birthday + s).split("");
            var total = 0;
            for(i in array){
                total = total + parseInt(array[i])*parseInt(coefficientArray[i]);
            }
            var lastNumber = lastNumberArray[parseInt(total%11)];
            var id_no_String = address + birthday + s + lastNumber;
            console.info(id_no_String);
            return id_no_String;
        }
</script>
</body>
</html>

<div id="form_div" style="width:500px;height:300px;">
    <input type="hidden" id="queueCode" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">电话（自动生成）</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" id="mobile" required  lay-verify="required" placeholder="电话" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号（自动生成）</label>
        <div class="layui-input-block">
            <input type="text" name="cardNumber" id="cardNumber" required  lay-verify="required" placeholder="身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>